<template>
    <div class="min-h-screen bg-slate-100 dark:bg-gray-900 p-4 md:p-6">
        
        <!-- 主卡片容器 -->
        <div
            class="mb-5 max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 relative">

                   <!-- 是否置顶 -->
                <div class="absolute h-4 w-4  right-4 top-2">
                    <svg t="1755179087549" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5708" width="30" height="30">
                        <path
                            d="M951.296 424.96L1024 352.256 671.744 0 599.04 72.704l70.144 70.656-168.96 168.96a296.96 296.96 0 0 0-286.72 75.264L143.36 458.24 72.704 387.584 0 460.8l245.248 245.248-139.776 139.776 72.704 72.704 140.288-140.288L563.2 1024l72.704-72.704-70.144-70.656 70.144-70.144a296.96 296.96 0 0 0 75.776-287.232l168.96-168.96z"
                            fill="#333333" p-id="5709"></path>
                    </svg>
                </div>


            <!-- 用户信息区域 -->
            <div class="p-4 md:p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center gap-4">
                    <el-avatar :size="50"
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain"
                        class="border-4 border-white dark:border-gray-600 shadow-md hover:scale-105 transition-transform duration-300" />
                    <div class="space-y-1">
                        <div
                            class="text-lg font-medium text-gray-800 dark:text-gray-100 hover:text-blue-600 transition-colors cursor-pointer">
                            Cookies
                        </div>
                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            2024-03-20
                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="p-1 md:p-1">
                <div class="prose max-w-none dark:prose-invert min-h-[100px] md:min-h-[100px]">
                    <MdPreview previewTheme="mk-cute" :modelValue="content"
                        class="rounded-lg bg-gray-50 dark:bg-gray-700 p-4 transition-colors duration-300"
                        :theme="themeStatus.isDark ? 'dark' : 'light'" />
                </div>
            </div>

            <!-- 互动按钮区域 -->
            <div class="px-4 md:px-6 py-3 bg-gray-50 dark:bg-gray-700 rounded-b-2xl">
                <div class="flex items-center gap-5 text-gray-600 dark:text-gray-300">
                    <button @click="like()" class="flex items-center gap-2 hover:text-red-500 transition-colors group">


                        <!-- 没有点赞的按钮 -->
                        <svg v-if="!isLike" class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>

                        <!-- 点赞的按钮 -->
                        <svg v-else class="w-5 h-5 group-hover:scale-110 transition-transform" fill="red" stroke="red"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                        <span class="font-medium">248</span>
                    </button>

                    <button @click="dynamicCommentStatus.toggle()" class="flex items-center gap-2 hover:text-blue-500 transition-colors group">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                        <span class="font-medium">56</span>
                    </button>

                </div>
                <DynamicComment />
            </div>
        </div>
    </div>

</template>

<script setup>
import DynamicComment from '../../components/share/DynamicComment.vue';

import { dynamicCommentStatus as useDynamicCommentStatus } from '../../ts/pinia';
const dynamicCommentStatus = useDynamicCommentStatus();

// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import { MdPreview } from 'md-editor-v3';
import { ref } from 'vue';
import { systemStatus } from '../../ts/pinia';
let themeStatus = systemStatus()
let content = ref(`
第一条动态
动态测试内容区域，支持markdown语句动态测试内容区域，支持markdown语句动态测试内容区域，
支持markdown语句
`);

let isLike = ref(false);
function like() {
    isLike.value = !isLike.value
    console.log("like函数");

}

</script>
<style scoped></style>